<template>
  <div class="bg-white" style="min-height: 100%; height: auto">
    <div class="p-20 bg-white">
      <title-com>企业账号列表</title-com>
      <div class="m-t-20 flex sb">
        <el-button plain @click="changeDrawer"
          >筛选条件
          <i class="el-icon-search"></i>
        </el-button>
        <div>
          <el-space>
            <i
              class="iconfont icon-Grid point"
              :class="[isImgTable ? 'font-theme' : '']"
              @click="isImgTable = true"
            ></i>
            <i
              class="iconfont icon-list point"
              :class="[!isImgTable ? 'font-theme' : '']"
              @click="isImgTable = false"
            ></i>
          </el-space>
        </div>
      </div>
      <!-- 列表 -->
      <div class="m-t-20">
        <AccoutCom :list="tableData" :isImgTable="isImgTable"></AccoutCom>
        <filter-com ref="drawer" />
      </div>
      <div class="ta-right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="50"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent, ref, DefineComponent } from "vue";
import TitleCom from "@/components/title.vue";
import FilterCom from "./components/filter.vue"
import AccoutCom from '@/components/account.vue'
export default defineComponent({
  components: {
    TitleCom,
    FilterCom,
    AccoutCom
  },
  setup () {
    const tableData = ref([{
      date: '2021-12-03',
      name: '',
      province: '',
      city: '',
      address: ''
    }])
    let drawer = ref()
    let isImgTable = ref(true)
    return {
      tableData,
      drawer,
      isImgTable
    }
  },

  methods: {
    changeDrawer () {
      (this.$refs.drawer as DefineComponent).changeDrawer(true)
    },
    goToDetail() {
      // this.$router.push("coldata/coldataitem");
    },
    handleOpenType1() {
      // this.isClick = true;
      // console.log(222, this.isClick);
    },
    handleOpenType2() {
      // this.isClick = false;
      // console.log(111, this.isClick);
    },
    handleSizeChange(val: number) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val: number) {
      // console.log(`当前页: ${val}`);
    },
    Collect(row: number) {
      // console.log(row);
      // this.collect = false;
    },
    CancelCollect(row: number) {
      // console.log(row);
      // this.collect = true;
    },
  },
});
</script>

<style lang="scss" scoped>
.list-wrapper {
  margin-right: -40px;
  overflow: hidden;
}
</style>
